<template>
	<view class="login-container">
		<view class="login-logo-container">
			<image class="login-logo" src="/static/logo.png" mode="scaleToFill"></image>
		</view>

		<view class="login-form-container">
			<form class="login-form" @submit="login">
				<input class="login-input" type="text" placeholder="请输入账号" name="account"
					placeholder-style="color:#cecece;font-weight: bold;" />
				<input class="login-input" type="text" placeholder="请输入密码" name="password"
					placeholder-style="color:#cecece;font-weight: bold;" password />
				<view class="login-btn-container">
					<button class="login-btn" form-type="submit">登录</button>
				</view>
				<view class="tips">
					<text>没有账号？</text>
					<navigator url="/pages/register/register" open-type="navigate"><text
							class="go-register-text">去注册</text></navigator>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

			login(e) {
				var account = e.detail.value.account;
				var password = e.detail.value.password;
				if (account == "") {
					uni.showToast({
						icon: "error",
						title: '账号不能为空',
						duration: 2000,
						mask: true
					});
					return;
				}
				if (password == "") {
					uni.showToast({
						icon: "error",
						title: '密码不能为空',
						duration: 2000,
						mask: true
					});
					return;
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				});

				uni.setStorage({
					data: e.detail.value.account,
					key: "account",
				})
				setTimeout(function() {
					uni.hideLoading();
					uni.navigateBack();
				}, 2000);

			}
		}
	}
</script>

<style>
	.login-container {
		height: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.login-logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-logo {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
	}

	.login-form-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-form {
		width: 70%;
	}

	.login-input {
		width: 100%;
		margin-top: 30rpx;
		height: 80rpx;
		border-radius: 20rpx;
		background-color: white;
		text-align: center;
		font-size: 28rpx;
	}

	.login-btn-container {
		margin-top: 50rpx;
	}

	.login-btn {
		background-color: #0099ff;
		color: white;
		border-radius: 20rpx;
		font-size: 30rpx;
	}

	.tips {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.go-register-text {
		color: #0099ff;
	}
</style>